import React, { useState, useEffect } from 'react'
import { Button, Table, Modal, Tree } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import axios from 'axios'
const { confirm } = Modal;



export default function RoleList() {

  const [dataSource, setDataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [currentRights, setCurrentRights] = useState([])
  const [currentId, setCurrentId] = useState(0)
  const [isModalVisible, setIsModalVisible] = useState(false)

  const confirmMessage = (item) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  // 删除函数
  const deleteMethod = (item) => {
    // console.log(item);
    // 后端 + 页面全部要删除

    // 一级数据
    setDataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`http://localhost:5000/roles/${item.id}`).then(res => {
      console.log('删除成功');
      console.log(res);
    })

  }

  const columns = [
    {
      title: "ID",
      dataIndex: 'id',
      render: (id) => {
        return <b>id</b>
      }
    },
    {
      title: "角色名称",
      dataIndex: 'roleName'
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMessage(item)}></Button>

          <Button
            type='primary'
            shape="circle"
            onClick={() => {
              setIsModalVisible(true)
              // console.log(item);
              setCurrentRights(item.rights)
              setCurrentId(item.id)
            }}
            icon={<EditOutlined />}></Button>
        </div>
      }
    }
  ]

  useEffect(() => {
    axios.get('http://localhost:5000/roles').then(res => {
      setDataSource(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get('http://localhost:5000/rights?_embed=children').then(res => {
      console.log(res.data);
      setRightList(res.data)
    })
  }, [])

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  const handleOk = () => {
    console.log(currentRights);
    setDataSource(dataSource.map(item => {
      if (item.id === currentId) {
        return {
          ...item,
          rights: currentRights
        }
      }
      return item
    }))
    setIsModalVisible(false)
    axios.patch(`http://localhost:5000/roles/${currentId}`, {
      rights:currentRights
    })

  }

  const onCheck = (checkKeys) => {
    setCurrentRights(checkKeys)
  }

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
      ></Table>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          checkable
          checkedKeys={currentRights}
          treeData={rightList}
          checkStrictly={true}
          onCheck={onCheck}
        />
      </Modal>

    </div >
  )
}
